import { useEffect } from "react";
import { Link } from "react-router";
import { t } from "ttag";

import {
  SettingsPageWrapper,
  SettingsSection,
} from "metabase/admin/components/SettingsSection";
import { useListPermissionsGroupsQuery, useListUsersQuery } from "metabase/api";
import { LoadingAndErrorWrapper } from "metabase/common/components/LoadingAndErrorWrapper";
import { useSelector } from "metabase/lib/redux";
import * as Urls from "metabase/lib/urls";
import { getUser, getUserIsAdmin } from "metabase/selectors/user";
import { Box, Button, Flex, Icon, Input, Stack, Tabs } from "metabase/ui";

import { PeopleList } from "../components/PeopleList";
import { USER_STATUS, type UserStatus } from "../constants";
import { usePeopleQuery } from "../hooks/use-people-query";

import S from "./PeopleListingApp.module.css";

const PAGE_SIZE = 25;

export function PeopleListingApp({ children }: { children: React.ReactNode }) {
  const isAdmin = useSelector(getUserIsAdmin);
  const currentUser = useSelector(getUser);

  const {
    data: groups = [],
    isLoading,
    error,
  } = useListPermissionsGroupsQuery();

  const {
    query,
    status,
    searchInputValue,
    updateSearchInputValue,
    updateStatus,
    handleNextPage,
    handlePreviousPage,
  } = usePeopleQuery(PAGE_SIZE);

  const { data: usersData } = useListUsersQuery({
    status: "deactivated",
    limit: 0,
  });
  const hasDeactivatedUsers = usersData && usersData.total > 0;

  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    updateSearchInputValue(e.target.value);
  };

  const buttonText =
    isAdmin && status === USER_STATUS.active ? t`Invite someone` : undefined;

  const handleTabChange = (tab: string | null) => {
    if (tab) {
      updateStatus(tab as UserStatus);
    }
  };

  useEffect(() => {
    if (!hasDeactivatedUsers) {
      updateStatus("active");
    }
  }, [hasDeactivatedUsers, updateStatus]);

  return (
    <SettingsPageWrapper title={t`People`}>
      <Stack gap={0}>
        {isAdmin && hasDeactivatedUsers && (
          <Tabs value={status} onChange={handleTabChange} pl="md">
            <Tabs.List className={S.tabs}>
              <Tabs.Tab value={USER_STATUS.active}>{t`Active`}</Tabs.Tab>
              <Tabs.Tab
                value={USER_STATUS.deactivated}
              >{t`Deactivated`}</Tabs.Tab>
            </Tabs.List>
          </Tabs>
        )}

        <SettingsSection>
          <LoadingAndErrorWrapper
            error={error}
            loading={isLoading || !currentUser}
          >
            <div data-testid="admin-panel">
              <Flex
                align="center"
                gap="xl"
                justify="space-between"
                mb="xl"
                wrap="wrap"
              >
                <Input
                  miw="14rem"
                  fz="sm"
                  flex="1"
                  type="text"
                  placeholder={t`Find someone`}
                  value={searchInputValue}
                  onChange={handleSearchChange}
                  leftSection={
                    <Icon c="text-secondary" name="search" size={16} />
                  }
                  rightSectionPointerEvents="all"
                  rightSection={
                    searchInputValue === "" ? (
                      <div /> // rendering null causes width change
                    ) : (
                      <Input.ClearButton
                        c={"text-secondary"}
                        onClick={() => updateSearchInputValue("")}
                      />
                    )
                  }
                />

                {buttonText && (
                  <Box>
                    <Link to={Urls.newUser()}>
                      <Button variant="filled">{buttonText}</Button>
                    </Link>
                  </Box>
                )}
              </Flex>

              {currentUser && (
                <PeopleList
                  groups={groups}
                  isAdmin={isAdmin}
                  currentUser={currentUser}
                  query={query}
                  onNextPage={handleNextPage}
                  onPreviousPage={handlePreviousPage}
                />
              )}

              {children}
            </div>
          </LoadingAndErrorWrapper>
        </SettingsSection>
      </Stack>
    </SettingsPageWrapper>
  );
}
